<template>
    <fieldset>
        <legend>按钮鉴权</legend>
        <div id="box">
            <!-- 内容界面 -->
            <div class="content" v-if="enter">
                <p>列表展示</p>
                <button @click="esc">退出登录</button>
                <button @click="getList">获取列表</button>
                <h3>
                    <img :src="userInfo.headimgurl" alt="" width="50">
                    昵称:<a href="">{{userInfo.nickname}}</a>
                </h3>
                <ul>
                    <li v-for="item in lists" :key="item._id">
                        <b>{{item.name}}</b>
                        <div>
                            <button v-has:read="permissionBtns">查看</button>
                            <button v-has:edit="permissionBtns">修改</button>
                            <button v-has:delete="permissionBtns">删除</button>
                            <button v-has:add="permissionBtns">增加</button>
                        </div>
                    </li>
                    
                </ul>
            </div>


            <!-- 登录界面 -->
            <div class="login" v-else>
                <p>请登入</p>
                <div>
                    <label for="username">用户名:</label>
                    <input type="text" id="username" v-model="username">
                </div>
                <div>
                    <label for="password">密码:&nbsp;&nbsp;&nbsp;</label>
                    <input type="password" v-model="password">
                </div>

                <button @click="login">登入</button>
            </div>

        </div>
    </fieldset>
</template>


<script>
    export default{
        data(){
            return {
                enter:false,
                username:"",
                password:"",
                userInfo:{},
                lists:[],
                // 权限按钮
                permissionBtns:[],
            }
        },
        methods:{
            // 获取登入，发送请求
            login(){
                
                fetch('http://chst.vip/users/login',{
                    // 请求方式
                    method:'post',
                    // 请求头
                    headers:{
                        'content-type':'application/json'
                    },
                    // 携带的参数
                    body:JSON.stringify({username:this.username,password:this.password})
                })
                    .then(body => body.json())
                    .then(res => {
                        if(res.state){
                            // 显示内容界面
                            this.enter = true;
                            // 获取用户信息
                            this.userInfo = res.userInfo;
                            // 将用户的令牌存到本地
                            sessionStorage.setItem('user-token',res.token);
                             // 给permissionBtns赋值
                            this.permissionBtns = res.permission.buttons;

                            // 登入内容页面自动获得列表数据
                            this.getList()
                        }else{
                            alert(res.msg)
                        }
                    })
            },
            // 获取列表数据，发送请求
            getList(){
                fetch('http://chst.vip/students/getstulist?count=10',{
                    headers:{
                        'authorization':sessionStorage.getItem('user-token')
                    }
                })
                    .then(body => body.json())
                    .then(res => {
                        if(res.state){
                            // 获取列表信息
                            this.lists = res.data;
                        }else{
                            alert(res.msg)
                        }
                    })

                    
            },
            // 退出登录
            esc(){
                this.enter = false;
                this.username = "";
                this.password = ""
            }
        },
        directives:{
            has:{
                inserted(el,binding){
                    // 获取按钮需要的权限，从指令参数中获取
                    let button = binding.arg;
                    // 获取用户权限，从表达式中获取
                    let userButton = binding.value;
                    // 通过数组方法includes判断是否存在权限
                    let hasButton = userButton.includes(button)
                    // 判断，不存在移除
                    if(!hasButton){
                        // 移除按钮
                        el.parentNode.removeChild(el)
                    }
                }
            }
        }
    }


</script>


<style scoped>
    #box{
        width: 500px;
        
    }
    a{
        text-decoration: none;
    }
    fieldset{
        border: 0;
        outline: 0;
        border: 1px solid green;
    }
    legend{
        color: green;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
        border: 1px solid green;
    }
    li{
        display: flex;
        justify-content: space-between;
        width: 100%;
        /* border: 1px solid deeppink; */
        margin: 10px;
        max-width: 500px;
    }
    .login p{
        color: #333;
        font-size: 20px;
        font-weight: 900;
    }
    .login div{
        margin-bottom: 10px;
    }
    .login button{
        width: 60px;
        height: 26px;
        font-size: 18px;
        line-height: 26px;
        color: #fff;
        background-color: rgb(75, 118, 10);
        border: 0;
        border-radius: 4px;
    }
    .content p:nth-of-type(1){
        font-size: 20px;
        font-weight: 900;
        color: #333;
    }
    .content button{
        /* width: 60px; */
        height: 26px;
        font-size: 18px;
        line-height: 26px;
        color: #fff;
        background-color: rgb(75, 118, 10);
        border: 0;
        border-radius: 4px;
        margin-right: 5px;
    }
    
</style>